<template>
  <div class="reportDetailContainer">
    <!-- 头部 -->
    <van-nav-bar title="视频监控" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <div class="vedioContainer">
      <!--tab标签-->
      <ul class="f fb tabul">
        <li
          class="tabli f fc"
          v-for="(item, index) in list"
          :key="index"
          @click="tabTap(index, item.id)"
        >
          <span class="title" :class="{ titleAct: tabIndex == index }">{{
            item.title
          }}</span>
        </li>
      </ul>
      <!-- 内容 -->
      <ul class="cont_ul" v-for="(item, index) in childList" :key="index">
        <li class="cont_li">
          <div class="vedio">
            <customVideo :id="item.id" :url="item.videoUrl" class="vedio11" />
          </div>
          <p class="desc">{{ item.title }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { selectAllVideo } from "@/api/api";
import customVideo from "../vedioCommon.vue";
// var videoHeight = (window.innerHeight - 200) / 2;
// var videoWidth = (window.innerWidth - 32 - 340) / 2 - 40;
export default {
  components: {
    customVideo,
  },
  data() {
    return {
      tabIndex: 0,
      tabNav: [
        { id: 0, name: "视频组1" },
        { id: 2, name: "视频组2" },
        { id: 3, name: "视频组3" },
        { id: 4, name: "视频组3" },
        { id: 5, name: "视频组3" },
      ],
      videoWidth: "100%",
      videoHeight: "100%",
      url:
        "http://hls01open.ys7.com/openlive/e7f349adc9fd44129e41a810b8c7f3ea.m3u8",
      list: [],
      childList: [],
       videos: [],
    };
  },
  mounted() {
    // this.getData();
    this.init();
  },
  methods: {
    toBook() {
      this.$router.push({ path: "/bookIndex" });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    tabTap(index, id) {
      this.tabIndex = index;
      var obj = this.list.find(function (obj) {
        return obj.id === id;
      });
      this.childList = obj.childList;
    },
    getData() {
      this.list = [
        {
          id: 438,
          title: "20楼",
          parent: 0,
          parentStr: "438-",
          videoUrl: "null",
          childList: [
            {
              id: 439,
              title: "模型",
              parent: 438,
              parentStr: "438-439-",
              videoUrl:
                "http://hls01open.ys7.com/openlive/e7f349adc9fd44129e41a810b8c7f3ea.m3u8",
            },
          ],
        },
        {
          id: 855,
          title: "第一作业区",
          parent: 0,
          parentStr: "855-",
          videoUrl: "null",
          childList: [
            {
              id: 856,
              title: "一号工区",
              parent: 855,
              parentStr: "855-856-",
              videoUrl:
                "http://hls01open.ys7.com/openlive/e7f349adc9fd44129e41a810b8c7f3ea.m3u8",
            },
          ],
        },
        {
          id: 1964,
          title: "222",
          parent: 0,
          parentStr: "1964-",
          videoUrl: "null",
        },
      ];
      this.childList = this.list[0].childList;
    },
    init() {
      var projectId = localStorage.getItem("projectid");
      this.Request(selectAllVideo(projectId)).then((res) => {
        if (res.status == "200") {
         this.list=res.body
          this.childList = this.list[0].childList;
        } else {
          this.$message({
            type: "error",
            message: res.Message,
            center: "true",
          });
        }
      });
    },
  },
};
</script>
<style lang="stylus" scoped>
@import '../../assets/common';

.vedio11 {
  width: 100%;
  height: 100%;
}

.vedioContainer {
  width: 100%;
  padding: 40px;
  box-sizing: border-box;
}

.tabul {
  margin-bottom: 30px;
  height: 70px;
  overflow-x: auto;
  background: #fff;
  box-shadow: 0px 14px 16px 0px rgba(43, 102, 253, 0.07);

  .tabli {
    width: 33%;
    height: 100%;
    flex-shrink: 0;
    text-align: center;

    .title {
      min-width: 130px;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #696969;
      padding-bottom: 10px;
    }

    .titleAct {
      border-bottom: 6px solid #699fff;
      color: #699fff !important;
    }
  }
}

.cont_ul {
  width: 100%;
  margin-bottom: 40px;
  background: #fff;
  box-shadow: 0px 14px 16px 0px rgba(43, 102, 253, 0.07);
  border-radius: 5px;

  .vedio {
    width: 100%;
    height: 290px;
    border-bottom: 1px solid #eee;
  }

  .desc {
    padding: 20px;
    box-sizing: border-box;
    font-size: 30px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #282828;
  }
}
</style>